<template>
  <!-- ContactList 人脉列表 -->
  <PageContainer>
    <view class="page-container">
      <Header
        v-model="headerHeight"
        :default-slot-content-height="88"
        :is-go-back="true"
        :is-box-shadow="false"
        title="人脉列表"
      >
        <template>
          <!-- 自定义title部分 -->
          <CustomMapHeader
            :main-type="params.contactsType"
            :view-type="ViewTypeEnum.LIST"
            :config="config"
            @main-change="mainChange"
            @view-change="viewChange"
            @search-confirm="searchConfirm"
          />
          <!-- 头部附加筛选功能 -->
          <FilterControl
            :view-type="ViewTypeEnum.LIST"
            :ass-type="params.assType!"
            @source-type-change="sourceTypeChange"
            @filter-change="filterChange"
          />
        </template>
      </Header>
      <Paglist v-model="dataList" :is-init-api="false" :parame="params" @register="register">
        <template v-for="(v, i) in dataList" :key="v.memberLeadingId">
          <view class="mt-10 ml-10 mr-10" style="border-radius: 20rpx; overflow: hidden">
            <MemberCardItem
              v-if="params.contactsType === ContactsTypeEnum.PERSON"
              :item="v"
              type="list"
              :source-type="params.assType"
            />
            <CompanyCardItem v-else :item="v" type="list" :source-type="params.assType" />
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  ContactList  人脉列表 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import CustomMapHeader from './components/CustomMapHeader.vue';
  import { ContactsTypeEnum, SourceTypeEnum, ViewTypeEnum } from '@/enums/contactsEnum';
  import { navigateBack, onLoad } from '@/router';
  import {
    type ContactsConfigResult,
    type MemberContactsData,
    type MemberContactsVoList,
  } from '@/api/contactsMap/types';
  import { provide, ref, reactive, unref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { memberContactsList } from '@/api/contactsMap';
  import MemberCardItem from '@/components/ContactsMap/components/MemberCardItem.vue';
  import CompanyCardItem from '@/components/ContactsMap/components/CompanyCardItem.vue';
  import { onPageScroll, onShow, onShareAppMessage } from '@dcloudio/uni-app';
  import FilterControl from './components/FilterControl.vue';
  import { useLocation } from '@/hooks/core/useLocation';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { useAuthSetting } from '@/hooks/core/useAuthSetting';
  import { useAppShare } from '@/hooks/core/useAppShare';

  const { setWxSharePath } = useAppShare()

  const headerHeight = ref(0);

  /** map & list 共有参数 */
  const params = reactive<Partial<MemberContactsData>>({
    current: 1,
    size: 10,
    mapType: ViewTypeEnum.LIST,
    keyword: '',
    distance: void 0,
    assType: SourceTypeEnum.INSIDE,
    contactsType: ContactsTypeEnum.PERSON,
    typeId: [],
    levelId: [],
    industryId: [],
    areaId: [],
  });

  provide('api', memberContactsList);

  const [register, { refresh }] = useConList();
  const dataList = ref<MemberContactsVoList[]>([]);
  const { getLocation } = useLocation();
  const { authErrorCallbak } = useAuthSetting();
  const { getContactsConfig, globalConfig } = useAppStoreWithOut();
  const config = ref<ContactsConfigResult>();

  const isRefresh = ref(false);
  onShow(async () => {
    if (unref(isRefresh)) __init();
  });

  async function __init() {
    const cres = await getContactsConfig();
    if (!cres?.unitListShow && cres?.connectionListShow) {
      params.contactsType = ContactsTypeEnum.COMPANY;
    }
    config.value = cres;
    try {
      const { latitude, longitude } = await getLocation();
      params.currentLatitude = latitude;
      params.currentLongitude = longitude;
    } catch (error) {
      isRefresh.value = true;
      authErrorCallbak('userLocation', { errno: 103, errMsg: `${error}` });
    }
    refresh();
  }

  onLoad(() => __init());

  function searchConfirm(val: string) {
    clearParams();
    params.keyword = val;
    refresh();
  }

  /** 数据主体切换 */
  function mainChange(type: ContactsTypeEnum) {
    params.contactsType = type;
    refresh();
  }

  function sourceTypeChange(val: SourceTypeEnum) {
    if (val !== SourceTypeEnum.INSIDE) {
      params.industryId = [];
      params.levelId = [];
      params.typeId = [];
    }
    params.assType = val;
    refresh();
  }

  function filterChange(val: Recordable<(number | string)[]> | null) {
    if (val) {
      if (val['distance']) {
        params.distance = val['distance'][0] as number;
        params.areaId = [];
      } else if (val['areaId']) {
        params.areaId = val['areaId'] as number[];
        params.distance = void 0;
      } else {
        params.industryId = (val['industryId'] as number[]) || [];
        params.levelId = (val['memberLevel'] as number[]) || [];
        params.typeId = (val['typeId'] as number[]) || [];
      }
    } else {
      params.areaId = [];
      params.distance = void 0;
    }
    refresh();
  }

  function viewChange() {
    navigateBack();
  }

  function clearParams() {
    params.areaId = [];
    params.industryId = [];
    params.levelId = [];
    params.typeId = [];
  }

  onPageScroll(() => {});

  onShareAppMessage(() => {
    return {
      path: setWxSharePath({ name: 'contactList' }),
      imageUrl: globalConfig?.comShareOptions.shareImg,
      title: '人脉列表',
    };
  });
</script>

<style lang="scss" scoped></style>
